<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                template="./WEB-INF/templates/template.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:param name="headerText" value="Edit Tutorial"></ui:param>

    <ui:define name="content"> 
        <script>
            function redirect(){
                if (document.getElementById("titleMsg").getElementsByTagName("span").length == 0){
                    window.location='listTutorials.xhtml';
                    return true;
                }
            }
        </script>
        <h:form id="tutorialForm" prependId="false">
            <p:panel header="Tutorial Information">

                <h:panelGrid columns="3">
                    <h:outputLabel for="title" value="Title: " />
                    <p:inputText id="title" value="#{editTutorialBB.title}" label="Title">
                        <f:ajax event="blur" render="titleMsg" />
                    </p:inputText>
                    <p:message id="titleMsg" for="title" />
                </h:panelGrid>

                <h:panelGrid columns="3">
                    <h:outputLabel for="desc" value="Description: " />
                    <p:inputTextarea id="desc" value="#{editTutorialBB.description}" label="Description">
                        <f:ajax event="blur" render="descMsg" />
                    </p:inputTextarea>
                    <p:message id="descMsg" for="desc" />
                </h:panelGrid>

            </p:panel>

            <p:commandButton
                value="Save tutorial"
                actionListener="#{editTutorialBB.saveTutorial()}"
                oncomplete="redirect()" />

            <p:button id="createStepButton" value="Create new Step" outcome="/editStep.xhtml" >
                <f:param name="tutorial" value="#{editTutorialBB.tutorial.id}" />
            </p:button>

            <p:dataTable id="stepList" value="#{editTutorialBB.steps}" var="step">

                <f:facet name="header">Steps in the Tutorial</f:facet>

                <p:column sortBy="#{step.stepOrder}" headerText="Step Order" >
                    <h:outputText value="#{step.stepOrder}" />
                </p:column>
                
                <p:column headerText="Title" sortBy="#{step.title}">
                    <h:outputText value="#{step.title}" />
                </p:column>

                <p:column headerText="Options">
                    <p:button image="ui-icon ui-icon-pencil" title="Edit" outcome="/editStep.xhtml" >
                        <f:param name="tutorial" value="#{editTutorialBB.tutorial.id}"/>
                        <f:param name="step" value="#{step.id}"/>
                    </p:button>

                </p:column>

            </p:dataTable>
        </h:form>

    </ui:define>
</ui:composition>